<template>
  <div>
    <van-icon
        @click="onClickLeft()"
        size="20"
        color="black"
        name="arrow-left"
        class="icon_arrow"
      />
    <div class="background">
      <p class="p1">whole登录</p>
      <p class="p2">新用户请使用手机验证码或第三方登录方式注册</p>
      <van-form class="form_login" @submit="onSubmit">
        <van-field
          v-model="user_name"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="user_pwd"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <br />
          <br /><br />
          <van-button
            round
            block
            type="info"
            native-type="submit"
            @click="Login()"
            >登录</van-button
          >
          <br />
          <p class="p3" @click="tallogin()">使用手机验证码登录</p>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import http from '../api/index';
export default {
  data() {
    return {
      user_name: '',
      user_pwd: '',
      routeFrom:'',
    };
  },
  beforeRouteEnter(to, from, next) {
    // 官方解释在此无法获取组件的this，还没创建
    // 可以使用next函数的回调，可以获取创建之前的组件实例
    next(function (vm) {
      // vm就是当前组件的实例，把从哪来的路径赋值给当前组件中的变量
      vm.routeFrom = from.path;
    });
  },
  methods: {
    onClickLeft(){
      this.$router.push(this.routeFrom);

    },
    onSubmit(values) {
      console.log('submit', values);
    },
    tallogin() {
      this.$router.push('/TelLogin');
    },
    Login() {
      http
        .userLogin({
          user_name: this.user_name,
          user_pwd: this.user_pwd,
        })
        .then((r) => {
          console.log('login==', r);
          if (r.code === 200) {
            this.$message({
              message: '登录成功',
              type: 'success',
            });
            // Notify({ type: 'success', message: '登录成功' });
            sessionStorage.setItem('username', r.data.user_name);
            sessionStorage.setItem('roleId', r.data.user_id);
            sessionStorage.setItem('src', r.data.user_image_road);
            this.$router.push(this.routeFrom);
          } else if (r.code === 201) {
            this.$message({
              message: '登录失败',
              type: 'error',
            });
            // Notify({ type: 'danger', message: '登录失败' });
          } else {
            this.$message({
              message: '系统异常',
              type: 'warning',
            });
          }
        });
    },
  },
};
</script>
<style scoped>
.p1 {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 3rem;
}
.p2 {
  margin-top: 1rem;
  font-size: 1.3rem;
  text-align: center;
  color: rgb(78, 77, 77);
}
.p3 {
  color: #1989fa;
  text-align: center;
}
.form_login {
  margin-top: 1.5rem;
}
.background {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: white;
}
.icon_arrow{
  position: absolute;
  left: 0.4rem;
  top: 0.7rem;
}
</style>